<template>
  <div class="address-selector">
    <!-- 省份选择 -->
    <div class="select-container">
      <select v-model="selectedProvince" id="province" @change="updateAddress" class="select-box">
        <option value="" disabled>请选择省</option>
        <option v-for="province in provinces" :key="province.code" :value="province.code">
          {{ province.value }}
        </option>
      </select>
    </div>

    <!-- 市区选择 -->
    <div class="select-container">
      <select v-model="selectedCity" id="city" :disabled="!selectedProvince" @change="updateAddress" class="select-box">
        <option value="" disabled>请选择市</option>
        <option v-for="city in cities" :key="city.code" :value="city.code">
          {{ city.value }}
        </option>
      </select>
    </div>

    <!-- 区域选择 -->
    <div class="select-container">
      <select v-model="selectedDistrict" id="district" :disabled="!selectedCity" @change="updateAddress"
        class="select-box">
        <option value="" disabled>请选择区</option>
        <option v-for="district in districts" :key="district.code" :value="district.code">
          {{ district.value }}
        </option>
      </select>
    </div>

    <!-- 详细地址输入 -->
    <div class="address-input-container">
      <input v-model="detailedAddress" id="detailedAddress" type="text" placeholder="请输入详细地址" class="address-input"
        @input="updateAddress" />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { nextTick } from 'vue';
import regionData from './regionData.json';

// 定义 emit 事件
const emit = defineEmits(['update:modelValue']);

// 响应式数据
const selectedProvince = ref('');
const selectedCity = ref('');
const selectedDistrict = ref('');
const detailedAddress = ref('');
const cities = ref([]);
const districts = ref([]);
const provinces = ref(regionData);

// 更新城市和区的数据
const updateAddress = () => {
  const province = provinces.value.find(p => p.code === selectedProvince.value);
  const city = cities.value.find(c => c.code === selectedCity.value);
  const district = districts.value.find(d => d.code === selectedDistrict.value);

  const regionString = `${province ? province.value : ''} ${city ? city.value : ''} ${district ? district.value : ''}`;
  const fullAddress = `${regionString} ${detailedAddress.value}`.trim();

  emit('update:modelValue', fullAddress);  // 更新父组件
};

// 监听省份变化，更新市
watch(selectedProvince, (newProvinceCode) => {
  const province = provinces.value.find(prov => prov.code === newProvinceCode);
  cities.value = province ? province.children : [];
  selectedCity.value = '';
  districts.value = [];
  updateAddress();
});

// 监听市区变化，更新区
watch(selectedCity, (newCityCode) => {
  const city = cities.value.find(c => c.code === newCityCode);
  districts.value = city ? city.children : [];
  selectedDistrict.value = '';
  updateAddress();
});

// 更新城市列表
const updateCities = () => {
  const province = provinces.value.find(p => p.code === selectedProvince.value);
  cities.value = province ? province.children : [];
  selectedCity.value = ''; // 重置选中的城市
  districts.value = []; // 重置区列表
};

// 更新区列表
const updateDistricts = () => {
  const city = cities.value.find(c => c.code === selectedCity.value);
  districts.value = city ? city.children : [];
  selectedDistrict.value = ''; // 重置选中的区
};

const parseAddress = async (address) => {
  if (!address) return;

  const parts = address.split(' ');
  if (parts.length >= 3) {
    // 设置省
    const province = provinces.value.find(p => p.value === parts[0]);
    if (province) {
      selectedProvince.value = province.code;
      await nextTick(); 
      updateCities(); // 更新市列表

      // 设置市
      const city = cities.value.find(c => c.value === parts[1]);
      if (city) {
        selectedCity.value = city.code;
        await nextTick(); 
        updateDistricts(); // 更新区列表

        // 设置区
        const district = districts.value.find(d => d.value === parts[2]);
        if (district) {
          selectedDistrict.value = district.code;
        }
      }
    }

    // 设置详细地址
    if (parts.length > 3) {
      detailedAddress.value = parts.slice(3).join(' ');
    }
  }
};

// 暴露方法给父组件
defineExpose({
  parseAddress,
});
</script>

<style scoped lang="scss">
.address-selector {
  display: flex;
  gap: 16px;
  /* 元素之间的间隔 */
}

.select-container {
  width: 120px;
}

.address-input-container {
  width: 150px;
}

.select-box,
.address-input {
  width: 100%;
  height: 36px;
  /* 输入框和选择框的高度 */
  padding: 0 8px;
  /* 水平内边距 */
}

.select-box:focus,
.address-input:focus {
  border-color: #4d90fe;
  /* 输入框获得焦点时，修改边框颜色 */
}
</style>
